<template>
    <div class="login_page" v-loading="loading">
        <img src="@/assets/images/login/logo.svg" class="logo" alt="">
        <div class="login_content">
            <SwiperBox :data="swiperdata" @setloading="setloading"/>
        </div>
    </div>
</template>

<script setup>

    import { useUserInfoStore } from '@hook/store';
    import SwiperBox from './components/SwiperBox.vue';
    import LoginImage1 from '@/assets/images/login/login_yaoxie.png';
    import LoginImage2 from '@/assets/images/login/login_shipin.png';
    import LoginImage3 from '@/assets/images/login/login_teshe.png';

    // 获取定制的 store 实例
    const store = useUserInfoStore();
    const loading = ref(false);

    const swiperdata = [
        { title: '稳步提升药品安全性、有效性、可及性。', url: LoginImage1 },
        { title: '落实两个责任，加强源头治理，坚守安全底线。', url: LoginImage2 },
        { title: '保障安全运行，强化风险管控，提升应急能力。', url: LoginImage3 }
    ];


    const setloading=(val)=>{
        loading.value = val
    }

    // 进入路由前清除缓存信息
    defineOptions({
        beforeRouteEnter:(to,from,next)=>{
            const store = useUserInfoStore();
            store.clearUserInfo();
            next();
        }
    })

</script>

<style scoped lang="less">
    .login_page{
        width: 100%;
        height: 100%;
        /*display: flex;*/
        /*flex-direction: column;*/
        background-color: #061427; /* 浏览器不支持的时候显示 */
        // background-image: radial-gradient(closest-side at 60% 50%, rgba(5,20,39,1), rgba(11,40,78,1));
        background-image: radial-gradient(closest-side at 75% 50%,#0C2951,#0C2951,#061427);
        padding-top: .3rem;
        .logo{
            width: 1.66rem;
            height: 0.23rem;
            margin-left: .5rem;
        }

        .login_content{
            height: calc(100vh - 0.6rem);
            display: flex;
            align-items: center;
        }
    }

</style>